<template>
	<div>
		<ele-input :value="stateValue" @input="handleStateValueChange"/>
		<p>{{stateValue}}</p>

		<!-- <ele-input v-model="inputValue" /> -->
		<ele-input @input="handleInput"></ele-input>
		<p>{{inputValue}} -> {{inputValueLastLetter}}</p>
		<ele-show :content="inputValue"></ele-show>
		<p>appName：{{appName}}，version：{{appWithVersion}}</p>
		<p>userName：{{userName}}，firstLetter：{{firstLetter}}</p>
		<button @click="handleChangeAppName">修改appName</button>

		<p>{{appVersion}}</p>

		<button @click="changeUserName">修改用户名</button>

		<button @click="registerModule">动态注册模块</button>

		<p v-for="(li,index) in todoList" :key="index">{{li}}</p>
	</div>
</template>
<script>
	import eleInput from "_c/EleInput";
	import eleShow from "_c/EleShow";
	import {mapState, mapGetters, mapMutations, mapActions} from "vuex";

	export default {
		name: "store",
		data() {
			return {
				inputValue: ""
			};
		},
		components: {
			eleInput,
			eleShow
		},
		methods: {
			...mapMutations(["setAppName", "setUserName", "setStateValue"]),
			...mapActions(["updateAppName"]),
			handleInput(val) {
				this.inputValue = val;
			},
			handleChangeAppName() {
				//   this.$store.commit("setAppName", "superAdmin");
				// 对象的写法
				// this.$store.commit('setAppName', {appName: 'superAdmin'});
				// this.$store.commit({type: "setAppName", appName: 'superAdmin'});
				//   this.setAppName("superAdmin");
				//   this.$store.commit("setAppVersion");
				this.updateAppName();
			},
			changeUserName() {
				//   this.$store.state.user.userName = "John"; // 错误方法
				  this.setUserName("course");
				  // 触发一个action
				  // this.$store.dispatch("updateAppName", "update");
			},
			registerModule() {
				this.$store.registerModule(["user", "todo"], {
					state: {
						todoList: ["study mutations", "study actions"]
					}
				});
			},
			handleStateValueChange(val) {
				this.setStateValue(val);
			}
		},
		computed: {
			// ...mapState(["appName"])
			// ...mapState({
			//   appName: state => state.appName,
			//   userName: state => state.user.userName
			// }),
			// 开启命名空间
			// ...mapState('user',{userName: state => state.userName}),
			...mapState({
				userName: state => state.user.userName,
				appVersion: state => state.appVersion,
				todoList: state => (state.user.todo ? state.user.todo.todoList : []),
				stateValue: state => state.stateValue
			}),
			...mapGetters(["appWithVersion", "firstLetter"]),
			appName() {
				return this.$store.state.appName;
			},
			userName() {
				return this.$store.state.user.userName;
			},
			inputValueLastLetter() {
				return this.inputValue.substr(-1, 1);
			},
			appWithVersion() {
				return this.$store.getters.appWithVersion;
			},
			// stateValue:{
			// 	get() {
			// 		return this.$store.state.stateValue;
			// 	},
			// 	set(value) {
					// 通过mutation改变值
			// 		this.setStateValue(value);
			// 	}
			// }
		}
	};
</script>
